<html>
	<head>
		<title>Sheet of the Century</title>
		<style type="text/css">
			@import url(/lib/dojo/tests/dnd/dndDefault.css);
			@import url(/lib/dijit/themes/dijit.css);
			@import url(/lib/dijit/themes/tundra/tundra.css);
			td{
				vertical-align:top;
			}
			.target {
			    border: 1px dotted gray;
			    width: 300px;
			    height: 300px;
			    padding: 5px;
			}
			
			.source {
			    border: 1px dotted blue;
			    min-height: 100px;
			    width: 300px;
			}
			
			.dojoDndItem {
			    width: 300px;
			}
			
			.skillIcon {
			    display: none;
			}
			
			.skillTitle {
			    font-weight: bold;
			    font-size: large;
			}
			
			.skillText {
			    font-size: smaller;
			}
			.dojoDndItemOver{
				cursor:auto;
			}
		</style>
		<script type="text/javascript" src="/lib/dojo/dojo.js" djConfig="parseOnLoad: true">
		</script>
		<script type="text/javascript">
			dojo.require("dojo.parser");
			dojo.registerModulePath("SheetElements", "/inc/SheetElements")
			dojo.require("dojo.dnd.Source");
			dojo.require("SheetElements.Skill");
		</script>
	</head>
	<body class="tundra">
		<h1>Drag and Drop Example</h1>
		<table>
			<tbody>
				<tr>
					<td>
						SOURCE
						<div dojoType="dojo.dnd.Source" jsId="c1" class="source" accept="skill" horizontal="true">
							<div dojoType="SheetElements.Skill" skillID="academics">
							</div>
							<div dojoType="SheetElements.Skill" skillID="might">
							</div>
							<div dojoType="SheetElements.Skill" skillID="science">
							</div>
						</div>
					</td>
					<td>
						TARGET
						<div dojoType="dojo.dnd.Source" jsId="c2" class="target" accept="skill">
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
